<template>
  <div class="personality">
    <div class="main">
      <div class="personStyle">
        用户名 <span>{{ user.account || "" }}</span>
      </div>
      <div class="personStyle" @click="changeName">
        姓名
        <span v-if="!editName">
          {{ user.name || "" }}
          <x-icon type="ios-arrow-right" size="22" fill="#fff"></x-icon>
        </span>
        <input
          v-else
          class="userEdit"
          type="text"
          :placeholder="user.name"
          v-model="user.name"
        />
      </div>
      <div class="personStyle" @click="changeNum">
        手机号
        <span v-if="!editPhone">
          {{ user.phone || "" }}
          <x-icon type="ios-arrow-right" size="22" fill="#fff"></x-icon>
        </span>
        <input
          v-else
          class="userEdit"
          type="number"
          :placeholder="user.num"
          oninput="if(value.length>11)value=value.slice(0,11)"
          v-model="user.phone"
        />
      </div>
    </div>
    <div class="btn" v-if="editName||editPhone" @click="saveUserInfo">保存</div>
  </div>
</template>

<script>
export default {
  name: "personalityInformation",
  data() {
    return {
      //顶部文本信息
      topInformation: "个人信息",
      //绑定顶部信息样式
      personality: "",
      editName: false,
      editPhone: false
    };
  },
  computed: {
    user() {
      return this.$store.state.user;
    }
  },
  methods: {
    //更换姓名
    changeName() {
      this.editName = true;
      this.editPhone = false;
      this.topInformation = "更改姓名";
    },
    //更换手机号
    changeNum() {
      this.editPhone = true;
      this.editName = false;
      this.topInformation = "更改手机号";
    },
    //修改用户信息
    saveUserInfo() {
      let data = {
        name: this.user.name,
        phone: this.user.phone
      };
      if (this.$route.query.type) {
        data.openId = JSON.parse(localStorage.getItem("openId"));
        data.nickName = JSON.parse(localStorage.getItem("nickName")) || "";
      } else if (this.$route.query.openId) {
        data.openId = JSON.parse(this.$route.query.openId);
      }
      this.$http(this.$API.updateUserInfo, data, true).then(res => {
        if (res) {
          let user = JSON.parse(localStorage.getItem("user"));
          user.name = data.name;
          user.phone = data.phone;
          localStorage.setItem("user", JSON.stringify(user));
          this.$router.push({ name: "personality" });
        }
      });
    },
    //判断登录状态
    loginStatus() {
      if (!this.user) {
        this.$router.push("/personality");
      }
    }
  },
  created() {
    this.loginStatus();
    //接受参数关键代码
    // this.user = this.$route.query.user;
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.personality {
  background: #22233f;
  height: 100vh;
  .personalityText {
    color: #000;
  }
  .main {
    // background: rgba(0,0,0,0.3);
    padding: 20px 0px;
    .personStyle {
      line-height: 60px;
      // width: 90%;
      margin: 0 5%;
      font-size: 18px;
      text-align: left;
      color: #ffffff;
      border-bottom: rgba(255, 255, 255, 0.2) 1px solid;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        // flex: 1;
        display: flex;
        align-items: center;
        // float: right;
        // margin-right: 18px;
        color: rgba(255, 255, 255, 0.5);
      }
      img {
        width: 10px;
        height: 20px;
        float: right;
        margin: 20px 0;
      }
    }
    .userEdit {
      line-height: 40px;
      font-size: 18px;
      width: 60%;
      // flex: 1;
      text-align: right;
      // margin: 0px 5%;
      color: #ffffff;
      border-bottom: rgba(255, 255, 255, 0.5) 1px solid;
    }
    .userEdit::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
  }
  .btn {
    height: 50px;
    margin: 100px 20px 0px 20px;
    border: #456de6 1px solid;
    line-height: 50px;
    color: #456de6;
    font-size: 16px;
    text-align: center;
    border-radius: 25px;
  }
}
</style>
